
<template>
  <div id="app">
    <!-- 查询表单 -->
<!--    欢迎{{this.user.username}}登录-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="部门名">
        <el-input v-model="formInline.name" placeholder="请输入部门名"></el-input>
      </el-form-item>

      <el-form-item label="状态" prop="">
        <el-select v-model="formInline.state" placeholder="请选择">
          <el-option label="启用" value="1">启用</el-option>
          <el-option label="禁用" value="2">禁用</el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="tab()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="info" @click="toAdd()" plain>添加</el-button>

    <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="load"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column
          prop="name"
          label="部门名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="ms"
          label="描述"
          width="180">
      </el-table-column>
      <el-table-column
          prop="time"
          label="创建时间">
      </el-table-column>
      <el-table-column
          prop="state"
          label="状态">
        <template slot-scope="scope">
          {{scope.row.state===1?"启用":"禁用"}}
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row.pid!=0" @click="look(scope.row.pid,scope.row)" size="mini">查看</el-button>
          <el-button type="text" @click="toUpdate(scope.row.id)" size="mini">修改</el-button>
          <el-button type="text" @click="del(scope.row.id)" size="mini">删除</el-button>
          <el-button type="text" v-if="scope.row.attribute===0" @click="toadd1(scope.row.id)" size="mini">添加下级</el-button>
          <el-button type="text" v-if="scope.row.attribute===1" @click="toadd2(scope.row.id)" size="mini">添加下级</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页展示数据-->
    <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[3, 6, 9, 12]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--添加弹窗1-->
    <el-dialog
        title="添加"
        :visible.sync="dialogVisible"
        width="30%">

      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="部门名称:" prop="">
          <el-input v-model="ruleForm.name" placeholder="请输入 部门名称"></el-input>
        </el-form-item>

        <el-form-item label="部门描述:" >
          <el-input v-model="ruleForm.ms" placeholder="请输入 部门描述"></el-input>
        </el-form-item>

        <el-form-item label="状态:" prop="">
          <el-tooltip :content="'启用是1禁用是2: ' + ruleForm.state" placement="top">
            <el-switch
                v-model="ruleForm.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="2">
            </el-switch>
          </el-tooltip>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="add('ruleForm')" v-text="ruleForm.id==null?'保存':'修改'"></el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--添加弹窗2-->
    <el-dialog
        title="添加"
        :visible.sync="dialogVisible3"
        width="30%">

      <el-form :model="ruleForm3" :rules="rules" ref="ruleForm3" label-width="100px" class="demo-ruleForm">

        <el-form-item label="部门名称:" prop="">
          <el-input v-model="ruleForm3.name" placeholder="请输入 部门名称"></el-input>
        </el-form-item>

        <el-form-item label="部门描述:" >
          <el-input v-model="ruleForm3.ms" placeholder="请输入 部门描述"></el-input>
        </el-form-item>

        <el-form-item label="状态:" prop="">
          <el-tooltip :content="'启用是1禁用是2: ' + ruleForm3.state" placement="top">
            <el-switch
                v-model="ruleForm3.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="2">
            </el-switch>
          </el-tooltip>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="add1('ruleForm3')" v-text="ruleForm3.id==null?'保存':'修改'"></el-button>
          <el-button @click="resetForm('ruleForm3')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--添加弹窗3-->
    <el-dialog
        title="添加"
        :visible.sync="dialogVisible4"
        width="30%">

      <el-form :model="ruleForm4" :rules="rules" ref="ruleForm4" label-width="100px" class="demo-ruleForm">

        <el-form-item label="部门名称:" prop="">
          <el-input v-model="ruleForm4.name" placeholder="请输入 部门名称"></el-input>
        </el-form-item>

        <el-form-item label="部门描述:" >
          <el-input v-model="ruleForm4.ms" placeholder="请输入 部门描述"></el-input>
        </el-form-item>

        <el-form-item label="状态:" prop="">
          <el-tooltip :content="'启用是1禁用是2: ' + ruleForm4.state" placement="top">
            <el-switch
                v-model="ruleForm4.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="2">
            </el-switch>
          </el-tooltip>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="add2('ruleForm4')" v-text="ruleForm4.id==null?'保存':'修改'"></el-button>
          <el-button @click="resetForm('ruleForm4')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--点击弹窗-->
    <el-dialog
        title="查看"
        :visible.sync="dialogVisible2"
        width="30%">

      <el-form :model="ruleForm2" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="上级部门:" prop="">
          {{this.name1}}
        </el-form-item>

        <el-form-item label="部门名称:" prop="">
          {{ruleForm2.name}}
        </el-form-item>

        <el-form-item label="部门描述:" prop="">
          {{ruleForm2.ms}}
        </el-form-item>

        <el-form-item label="状态:" prop="">
          {{ruleForm2.state===1?"启用":"禁用"}}
        </el-form-item>

        <el-button type="primary" @click="guanbi()">关闭</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>
<style >

</style>
<script>
// @ is an alias to /src
import axios from "axios"

export default {
  data(){
    return {
      tableData: [],
      pageNum:1,
      pageSize:10,
      total:0,
      formInline:{
        name:"",
        state:"",
      },
      user:{},
      roomList:[],
      dialogVisible:false,
      dialogVisible2:false,
      dialogVisible3:false,
      dialogVisible4:false,
      tx:[],
      ruleForm:{},
      ruleForm2:{},
      ruleForm3:{},
      ruleForm4:{},
      imageUrl:"",
      tid:null,
      name1:null,
    }
  },
  methods:{
    look(pid,row){
      this.dialogVisible2=true;
      this.ruleForm2=row
      this.axios.get(`http://localhost:9003/department/findById?id=${pid}`).then(res=>{
        this.name1=res.data.data.name;
      })
    },
    guanbi(){
      this.dialogVisible2=false;
    },
    tab(){
        this.axios.get(`http://localhost:9003/department/tab?name=`+this.formInline.name+`&state=`+this.formInline.state).then(res=>{
            console.log(res.data);
            console.log(this.formInline.name)
            this.tableData=res.data.data;
        })

    },
    handleCurrentChange(val) {//分页方法
      this.pageNum=val;
      this.findPage();
    },
    toAdd(){ //往添加对话框里清空数据
      this.dialogVisible=true;
      this.ruleForm={};
    },
    toadd1(id){ //往添加对话框里清空数据
      this.tid=id;
      this.dialogVisible3=true;
      this.ruleForm3={};
    },
    toadd2(id){ //往添加对话框里清空数据
      this.tid=id;
      this.dialogVisible4=true;
      this.ruleForm4={};
    },
    add(formName) { //添加方法
      this.$refs[formName].validate((valid) => {
        if (valid) {//满足校验
          //通过ajax把数据保存到后端
          this.ruleForm.tx=this.tx.toString();
          axios.post(`http://localhost:9003/department/add`,this.ruleForm).then(res=>{
            if (res.data.code==200){
              this.$message.success("添加成功");
            }else{
              this.$message.error("添加失败");
            }
            this.dialogVisible=false;
            this.tab();
          })
        } else {//不满足校验
          console.log('error submit!!');
          return false;
        }
      });
    },
    add1(formName) { //添加方法
      this.$refs[formName].validate((valid) => {
        if (valid) {//满足校验
          //通过ajax把数据保存到后端
          this.axios.post(`http://localhost:9003/department/add1?id=${this.tid}`,this.ruleForm3).then(res=>{
            if (res.data.code==200){
              this.$message.success("添加成功");
            }else{
              this.$message.error("添加失败");
            }
            this.dialogVisible3=false;
            this.tab();
          })
        } else {//不满足校验
          console.log('error submit!!');
          return false;
        }
      });
    },
    add2(formName) { //添加方法
      this.$refs[formName].validate((valid) => {
        if (valid) {//满足校验
          //通过ajax把数据保存到后端
          this.axios.post(`http://localhost:9003/department/add2?id=${this.tid}`,this.ruleForm4).then(res=>{
            if (res.data.code==200){
              this.$message.success("添加成功");
            }else{
              this.$message.error("添加失败");
            }
            this.dialogVisible4=false;
            this.tab();
          })
        } else {//不满足校验
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) { //重置按钮点击可以重置
      this.$refs[formName].resetFields();
    },
    toUpdate(id){ //修改回显数据方法
      this.dialogVisible=true;
      axios.get(`http://localhost:9003/department/findById?id=${id}`).then(res=>{
        this.ruleForm=res.data.data;
      })
    },
    del(id){ //删除方法
      this.$confirm("确定要删除吗?一旦删除,该条信息将不能恢复。", '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get(`http://localhost:9003/department/deleteById?id=${id}`).then(res=>{
          if (res.data.code==1){
            this.$message.error("删除shibai");
          }else{
            this.$message.success("删除成功！");
          }
          this.tab();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  created(){
    /*
    ！！！！！！！！！！注意created()：
    这个里面才是可以把数据展示到页面的方法
    思考那个方法是要把数据放到前台 就在这个里面写那个方法
     */
    // var userDB=sessionStorage.getItem("userDB"); //从login.html页面的session域中拿到的数据
    // if (userDB==null){
    //   location.href="#/login";
    // }
    // this.user=JSON.parse(userDB);//动态获取显示登录人的数据 因为从session域中拿出来所以要转换数据类型
    // this.findPage();//展示所有的数据
    this.tab();
    // this.fetchTree();
    // this.xialaList();//动态获取下拉框的数据
  }
}
</script>
